<template>
  <div>
    <div id="pieB"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts/core';

  export default {
    name: "pieB",
    props:['value','name'],
    methods: {
      pie(){

        var chartDom = document.getElementById('pieB');
        var myChart = echarts.init(chartDom);
        var option;

        let value = this.value; //图上角度数据
        let name = this.name;
        option = {
          title:[
            {
              text: name,
              x: 'center',
              top: "24%",
              textStyle: {
                fontSize: 18,
                color: '#7bdd29',
                foontWeight: '500',
              },
            },
            {
              text: "{a|" + value + "}{c|%}",
              x: "center",
              top: "54%",
              textStyle: {
                rich: {
                  a: {
                    fontSize: 12,
                    color: "#7bdd29",
                    fontWeight: "bold",
                  },
                  c: {
                    fontSize: 12,
                    color: "#7bdd29",
                    fontWeight: "bold",
                  },
                },
              },
            },
          ],
          series: [

            {
              name: "",
              type: "pie",
              radius: ["92%", "100%"],
              silent: true,
              clockwise: true,
              startAngle: 90,
              z: 0,
              zlevel: 0,
              label: {
                normal: {
                  position: "center",
                },
              },
              data: [
                {
                  value: value,
                  name: "",
                  itemStyle: {
                    normal: {
                      color: {
                        // 完成的圆环的颜色
                        colorStops: [
                          {
                            offset: 0,
                            color: "#7bdd29", // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#7bdd29", // 100% 处的颜色
                          },
                        ],
                      },
                    },
                  },
                },
                {
                  value: 100 - value,
                  name: "",
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "#173164",
                    },
                  },
                },
              ],
            },
            {
              name: "",
              type: "gauge",
              radius: "83%",
              center: ["50%", "50%"],
              startAngle: 0,
              endAngle: 359.9,
              splitNumber: 8,
              hoverAnimation: true,
              axisTick: {
                show: false,
              },
              splitLine: {
                length: "110%",
                lineStyle: {
                  width: 2,
                  color: "rgba(0,0,0,0.6)",
                },
              },
              axisLabel: {
                show: false,
              },
              pointer: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  opacity: 0,
                },
              },
              detail: {
                show: false,
              },
              data: [
                {
                  value: 0,
                  name: "",
                },
              ],
            },
          ],
        };

        option && myChart.setOption(option);
      }
    },
    mounted() {
      this.pie()
    }
  }
</script>

<style scoped>
#pieB {
  width: 8vh;
  height: 8vh;
}
</style>
